<template>
  <div>
    <!-- 顶部快捷导航start -->
    <div class="shortcut">
      <h1>{{$store.state.Mt.n}}</h1>
      <div class="w">
        <div class="fl">
          <ul>
            <li>品优购欢迎您！</li>
            <li>
              <a href="#">请登录</a>
              <a href="#" class="style-red">免费注册</a>
            </li>
          </ul>
        </div>
        <div class="fr">
          <ul>
            <li><a href="#">我的订单</a></li>
            <li class="spacer"></li>
            <li>
              <a href="#">我的品优购</a>
              <i class="icomoon"></i>
            </li>
            <li class="spacer"></li>
            <li><a href="#">品优购会员</a></li>
            <li class="spacer"></li>
            <li><a href="#">企业采购</a></li>
            <li class="spacer"></li>
            <li><a href="#">关注品优购</a> <i class="icomoon"></i></li>
            <li class="spacer"></li>
            <li><a href="#">客户服务</a> <i class="icomoon"></i></li>
            <li class="spacer"></li>
            <li><a href="#">网站导航</a> <i class="icomoon"></i></li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 顶部快捷导航end  -->
    <div class="car-header">
      <div class="w">
        <div class="car-logo">
          <img src="img/logo.png" alt="" /> <b>购物车</b>
        </div>
      </div>
    </div>
    <div class="c-container">
      <div class="w">
        <div class="cart-filter-bar">
          <em>全部商品</em>
        </div>
        <!-- 购物车主要核心区域 -->
        <div class="cart-warp">
          <!-- 头部全选模块 -->
          <div class="cart-thead">
            <div class="t-checkbox">
              <input
                type="checkbox"
                name=""
                id=""
                class="checkall"
                @change="checkall"
                v-model="$store.state.che"
                key=""
              />
              全选
            </div>
            <div class="t-goods">商品</div>
            <div class="t-price">单价</div>
            <div class="t-num">数量</div>
            <div class="t-sum">小计</div>
            <div class="t-action">操作</div>
          </div>
          <!-- 商品详细模块 -->
          <div class="cart-item-list">
            <div
              class="cart-item check-cart-item"
              v-for="(i, index) in arr"
              :class="{ active: i.check }"
              :key="index"
              v-if="i.c"
            >
              <div class="p-checkbox">
                <input
                  type="checkbox"
                  name=""
                  id=""
                  class="j-checkbox"
                  v-model="i.check"
                  @change="ck(i)"
                />
              </div>
              <div class="p-goods">
                <div class="p-img">
                  <img src="upload/p1.jpg" alt="" />
                </div>
                <div class="p-msg">{{ i.name }}</div>
              </div>
              <div class="p-price">{{ i.price }}</div>
              <div class="p-num">
                <div class="quantity-form">
                  <a href="javascript:;" class="decrement" @click="jian(i)"
                    >-</a
                  >
                  <input type="text" class="itxt" :value="i.dd" />
                  <a href="javascript:;" class="increment" @click="add(i)">+</a>
                </div>
              </div>
              <div class="p-sum">￥{{ i.str.toFixed(2) }}</div>
              <div class="p-action">
                <a href="javascript:;" @click="del(i)">删除</a>
              </div>
            </div>
          </div>
          <!-- 结算模块 -->
          <div class="cart-floatbar">
            <div class="select-all">
              <input
                type="checkbox"
                name=""
                id=""
                class="checkall"
                @change="checkall"
                v-model="$store.state.che"
              />全选
            </div>
            <div class="operation">
              <a href="javascript:;" class="remove-batch"> 删除选中的商品</a>
              <a href="javascript:;" class="clear-all">清理购物车</a>
            </div>
            <div class="toolbar-right">
              <div class="amount-sum">
                已经选<em>{{ $store.getters.od }}</em
                >件商品
              </div>
              <div class="price-sum">
                总价： <em>{{ $store.getters.fn.toFixed(2) }}</em>
              </div>
              <div class="btn-area">去结算</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- footer start -->
    <div class="footer">
      <div class="w">
        <!-- mod_service -->
        <div class="mod_service">
          <ul>
            <li>
              <i class="mod-service-icon mod_service_zheng"></i>
              <div class="mod_service_tit">
                <h5>正品保障</h5>
                <p>正品保障，提供发票</p>
              </div>
            </li>
            <li>
              <i class="mod-service-icon mod_service_kuai"></i>
              <div class="mod_service_tit">
                <h5>正品保障</h5>
                <p>正品保障，提供发票</p>
              </div>
            </li>
            <li>
              <i class="mod-service-icon mod_service_bao"></i>
              <div class="mod_service_tit">
                <h5>正品保障</h5>
                <p>正品保障，提供发票</p>
              </div>
            </li>
            <li>
              <i class="mod-service-icon mod_service_bao"></i>
              <div class="mod_service_tit">
                <h5>正品保障</h5>
                <p>正品保障，提供发票</p>
              </div>
            </li>
            <li>
              <i class="mod-service-icon mod_service_bao"></i>
              <div class="mod_service_tit">
                <h5>正品保障</h5>
                <p>正品保障，提供发票</p>
              </div>
            </li>
          </ul>
        </div>
        <!-- mod_help -->
        <div class="mod_help">
          <dl class="mod_help_item">
            <dt>购物指南</dt>
            <dd><a href="#">购物流程 </a></dd>
            <dd><a href="#">会员介绍 </a></dd>
            <dd><a href="#">生活旅行/团购 </a></dd>
            <dd><a href="#">常见问题 </a></dd>
            <dd><a href="#">大家电 </a></dd>
            <dd><a href="#">联系客服 </a></dd>
          </dl>
          <dl class="mod_help_item">
            <dt>购物指南</dt>
            <dd><a href="#">购物流程 </a></dd>
            <dd><a href="#">会员介绍 </a></dd>
            <dd><a href="#">生活旅行/团购 </a></dd>
            <dd><a href="#">常见问题 </a></dd>
            <dd><a href="#">大家电 </a></dd>
            <dd><a href="#">联系客服 </a></dd>
          </dl>
          <dl class="mod_help_item">
            <dt>购物指南</dt>
            <dd><a href="#">购物流程 </a></dd>
            <dd><a href="#">会员介绍 </a></dd>
            <dd><a href="#">生活旅行/团购 </a></dd>
            <dd><a href="#">常见问题 </a></dd>
            <dd><a href="#">大家电 </a></dd>
            <dd><a href="#">联系客服 </a></dd>
          </dl>
          <dl class="mod_help_item">
            <dt>购物指南</dt>
            <dd><a href="#">购物流程 </a></dd>
            <dd><a href="#">会员介绍 </a></dd>
            <dd><a href="#">生活旅行/团购 </a></dd>
            <dd><a href="#">常见问题 </a></dd>
            <dd><a href="#">大家电 </a></dd>
            <dd><a href="#">联系客服 </a></dd>
          </dl>
          <dl class="mod_help_item">
            <dt>购物指南</dt>
            <dd><a href="#">购物流程 </a></dd>
            <dd><a href="#">会员介绍 </a></dd>
            <dd><a href="#">生活旅行/团购 </a></dd>
            <dd><a href="#">常见问题 </a></dd>
            <dd><a href="#">大家电 </a></dd>
            <dd><a href="#">联系客服 </a></dd>
          </dl>
          <dl class="mod_help_item mod_help_app">
            <dt>帮助中心</dt>
            <dd>
              <img src="upload/erweima.png" alt="" />
              <p>品优购客户端</p>
            </dd>
          </dl>
        </div>
        <!-- mod_copyright  -->
        <div class="mod_copyright">
          <p class="mod_copyright_links">
            关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 |
            友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site |
            Contact U
          </p>
          <p class="mod_copyright_info">
            地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096
            电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br />
            京ICP备08001421号京公网安备110108007702
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr: "",
      pr: [],
      soop: "",
      person: { fname: "John", lname: "Doe", age: 25 },
    };
  },
  mounted() {
    this.arr = this.$store.state.arr;
  },
  methods: {
    checkall() {
      this.$store.commit("check");
    },
    ck(i) {
      this.$store.commit("ck", i);
    },
    add(i) {
      this.$store.commit("add", i);
    },
    jian(i) {
      this.$store.commit("odd", i);
    },
    del(i) {
      this.$store.commit("del", i);
    },
    checkitem(i) {
      this.$store.commit("check", i);
    },
  },
};
</script>
<style  src="@/css/braek.css"  scoped>
</style>
<style  src="@/css/car.css"  scoped>
</style>
<style  src="@/css/comon.css"  scoped>
</style>
<style lang="css">
.active {
  background: #ccc !important;
}
</style>